<script setup lang='ts'>
import { GalleryImageInfo } from '@/models/media';
import { onMounted, ref } from 'vue';
import Nav from '@/components/index/Nav.vue';
import { appRef } from '@/models/app.ref';
import { mediaService } from '@/services/media.service';
import { SiderMenuEnum } from '@/models/@types';
import router from '@/router';


let masonry;

const page = ref(1);
const number = 30;
const list = ref([] as GalleryImageInfo[]);
const baseurl = ref('');

onMounted(() => {
  // 浏览器窗口变动
  window.onresize = masonryWidth;
  window.addEventListener('scroll', onScroll);
  window.addEventListener('touchmove', onScroll);
  masonryWidth();
  getList();
})

const loading = ref(false);
function getList(): void {
  loading.value = true;
  mediaService.list(page.value, number).then((res) => {
    res?.map(val => list.value.push(val));
    baseurl.value = appRef.media.gallery.baseurl;
    setTimeout(() => loading.value = false, 500);
  })
}


// 设置masonry 宽度
const width = ref(0);
const boxWidth = ref(240);
const defaultWidth = 240;        // 盒子宽度
const gutter = 20;        //盒子与盒子之间的间距
function masonryWidth() {
  const browser = document.body.clientWidth;
  if (browser <= defaultWidth * 2) {
    width.value = browser - 20;
    boxWidth.value = ((browser - gutter - 20) / 2);
  } else {
    const num = (browser - defaultWidth) / (defaultWidth + gutter);
    const n = parseInt(String(num));
    const masonryWidth = n * (defaultWidth + gutter) + defaultWidth;
    width.value = masonryWidth;
    boxWidth.value = defaultWidth;
  }
}

let lastScrollTop = 0;
function onScroll(): void {
  const clientHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop || window.pageYOffset;
  const scrollHeight = document.documentElement.scrollHeight;
  // 滚动到了底部
  const bottom = scrollHeight - (clientHeight + scrollTop);
  if (bottom < 1  && scrollTop > lastScrollTop) {
    page.value++
    getList();
  }
  lastScrollTop = scrollTop;
}

async function onSameModel(item: GalleryImageInfo): Promise<void> {
  await appRef.aidraw.menus();
  await appRef.aidraw.add(SiderMenuEnum.Leaf);
  await appRef.aidraw.setPrompt(item.prompt, item.negativePrompt);
  router.push('/chat/aidraw')
}

function getUrl(id: string): string {
  return baseurl.value + id + '.webp'
}

const isLargeImage = ref(false);
const currImage = ref({} as GalleryImageInfo);
function onShowImage(info: GalleryImageInfo): void {
  currImage.value = info;
  isLargeImage.value = true;
}

</script>
<template>
  <div>
    <Nav />
    <div class="main" :style="{ width: width + 'px' }">
      <div class="group" v-masonry transition-duration="0.3s" item-selector=".item" :gutter="gutter">
        <div class="item" v-for="item in  list " v-masonry-tile :key="item.image_id" :style="{ width: boxWidth + 'px' }">
          <a-image class="img" width="100%" :src="getUrl(item.small || item.image_id)" />
          <div class="mask flex-c" @click="onShowImage(item)" :style="{ display: boxWidth < 240 ? 'flex' : 'none' }">
            <div class="top flex">
              <div class="btn flex" @click.stop="onSameModel(item)">
                <icon-brush size="16" style="margin-right: 6px;" />同款
              </div>
            </div>
            <div class="bottom">
              <div class="prompt ellipsis2">{{ item.prompt }}</div>
            </div>
          </div>
        </div>
      </div>
      <a-spin style="width: 100%;text-align: center; margin-top: 20px;" :size="36" v-if="loading" />
    </div>
    <a-image-preview :src="getUrl(currImage.image_id)" v-model:visible="isLargeImage" />
  </div>
</template>
<style lang='scss' scoped>
.main {
  margin-top: 80px;
  margin: 70px auto;


  .group {
    width: 100%;

    .item {
      overflow: hidden;
      margin-bottom: 10px;
      position: relative;
      border-radius: 12px;

      &:hover {
        .mask {
          display: flex !important;
        }
      }

      .img {
        width: 100%;
      }

      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0000004d;
        justify-content: space-between;
        padding: 20px;
        color: #fff;
        cursor: zoom-in;

        .top {
          width: 100%;

          .btn {
            background: #ff4763;
            padding: 10px 16px;
            border-radius: 10px;
            cursor: pointer;

            &:hover {
              background: #ff3957e1;
            }
          }
        }

        .bottom {
          .prompt {
            font-size: 14px;
            line-height: 20px;
          }
        }

      }
    }
  }


}
</style>